<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>通过Map添加线路</title>
<style>
#nowPoint{
	border: 1px solid gray;
	align:center;
}
body{
	width:100%;
	
}
.left{
	float:left;
	width:70%;
	margin-bottom:5px;
}
.map{
	width:100%; 
	height:500px;
	border: 1px solid gray;
}
.formlng{
	margin-top:10px; 
}
#editbtn{
	margin-left:20px;
}
#addbtn{
	margin-left:10px;
}
.right {
	float:left;
	margin-left:2px;
	
	width:29%;
}

.right table{
	width:100%;
/*	border:solid #000;*/
/*	border-width:0 1px 1px 0;*/
/*	border-spacing:0;*/
	text-align:center;
}
.right table td,th{
	border:solid #000;
	border-width:1px 0 0 1px;
}
.line_l{
	background:#ccc;
}
</style>
<link href="__PUBLIC__/admin/css/addLinesFromMap.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
	<div class="left">
		<div id="map" class="map"> </div>
		<div class = "formlng">
			<form>
				经度：<input name="longitude" id="longitude" class="text" style="width: 154px" />&nbsp;&nbsp;
				纬度：<input name="latitude" id="latitude" class="text" style="width: 154px"  />
				<input type="button" id="editbtn" value="修改" />
				<input type="button" id="addbtn" value="加入" />
				<input type="button" id="test" value="test" onclick="getLinePoints()" />
				
			</form>
		</div>
	</div>
	
	<div class="right">
	<table> 
	<thead id="points">
		<tr>
			<th class="line_l" >序号</th>
			<th class="line_l">经度</th>
			<th class="line_l">纬度</th>
			<th class="line_l">操作</th>
		</tr>
		
	</thead>
	<!--
	<tr>
		<td class="line_c">1</td>
		<td class="line_c">2,3</td>
		<td class="line_c"><a href="#">操作</a></td>
	</tr>
	-->
	</table>
	</div>
</body>
</html>


<script type="text/javascript">

/*
 * 相关变量定义
 */
var markerOrder = 0;       //线路临时选择点序号
var marker = new Array();  //临时标记点数组
//临时线路数组
// var polyline = new Array();
var polylineOrder = 0;     //临时线路序号
var polyline;



var map = new BMap.Map("map",{mapType:BMAP_HYBRID_MAP});//以"map"创建map地图对象

map.centerAndZoom(new BMap.Point(114.2726486277,30.447122443619), 15);//设置地图的中心点和缩放级别（18）

/*
 * 为地图添加相关控件
 */
map.addControl(new BMap.MapTypeControl()); 
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());                 

map.setCurrentCity("武汉");         
map.enableScrollWheelZoom();//设置允许滚轮缩放

//添加map点击事件，当单击地图时在当前点添加marker
map.addEventListener("click", function(e){
	document.getElementById("longitude").value = e.point.lng;
	document.getElementById("latitude").value = e.point.lat;
	
	marker[markerOrder] = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 创建标注
	
	/*
	marker[markerOrder].addEventListener("dragend", function(e1) {
			document.getElementById("longitude").value = e1.point.lng;
			document.getElementById("latitude").value = e1.point.lat;
	});
	*/
	if(markerOrder==1){
		showLines(marker[markerOrder-1], marker[markerOrder]);//前一点与当前点连线
	}
	
	/*
	if(markerOrder>1){
		addPointToLines(markerOrder,polyline[polylineOrder],marker[markerOrder]);
	}
	*/
	
	map.addOverlay(marker[markerOrder]);      // 将标注添加到地图中
	marker[markerOrder].enableDragging(true); // 设置标注可拖拽
	markerOrder = markerOrder+1;
	});
	
	
	
/**
 * @author 袁帅
 * 在两个marker之间连线
 */
// /*
function showLines(marker0, marker1){
	
	// alert(marker0.getPosition().lng);
	
	var points = new Array();
	points[0] = marker0.getPosition();
	points[1] = marker1.getPosition();

	if(!polyline){
		polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
	}
	addLinesToMaps(polyline);
	// polylineOrder = polylineOrder+1;
}
// */

function addPointToLines(number, polyline,marker){
	polyline.setPositionAt(number, marker.getPosition());
}

//	将管线添加到地图上
function addLinesToMaps(polyline){
	map.addOverlay(polyline);
	polyline.enableEditing();
}

function getLinePoints(){
	var points = new Array();
	var i;
	points = polyline.getPath();
	pointsLength = points.length;
	var innerhtml="";
	for(i=0;i<pointsLength;i++){
		innerhtml = innerhtml+
		"<tr><td>"+i+"</td><td>"+points[i].lng+","+points[i].lat+"</td><td><a href=\"#\">操作</a></td></tr><br/>";
	}
	document.getElementById("points").innerHTML  = innerhtml;
	
	// alert(points.length);
}




</script>